<template>
   <div id="NavigationBox" >
        <div class="BackColor"  v-if="NavigationBackColor"></div>
        <WindowNavi id="WindowNavi" class="Navigation flex" :naviData="naviData"/>
        <OtherNavi  id="OtherNavi" class="Navigation flex" :naviData="naviData"/>
        
   </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import OtherNavi from './OtherNavi/OtherNavi.vue'
import WindowNavi from './WindowNavi/WindowNavi.vue'
  export default 
  {
     components: {  WindowNavi, OtherNavi },
     name :'Navigation', 
     computed:{
       ...mapState('Login',['User']),
       ...mapState('Setting',['Navigation','Subject']),
       ...mapState('Tool',['NavigationBackColor'])
     },
     data(){
        return{
            naviData:[
                {id:1,name:'首页',path:'/home',src:'Home.png'},
                {id:2,name:'消息',path:'/message',src:'Home.png'},
                {id:3,name:'广场',path:'/square',src:'Home.png'},
            ],
        }
     },
     methods:{
        ...mapMutations('Login',['LOGINSTATEON']),
      
     },
  }
</script>
<style scoped lang="less">
#NavigationBox{
    width: 100vw;
    min-width: 400px;
    height:60px;
    position: fixed;
    top: 0;
    z-index: 900;
    transition-duration: 0.5s;

}
.BackColor{ //背景颜色
     position: absolute;
     z-index: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: var(--NavigationBackColor);
     opacity: var(--NavigationOpacity);
}

.Navigation{
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 5;
    display: none;
}

//  /* 电脑 */ 1281
 @media screen and (min-width: 1100px) {
     #WindowNavi{
        display: flex;
     }
 }
 /* 平板或手机 */
 @media screen and (max-width: 1100px){
    #OtherNavi{
        display: flex;
        padding: 0 10px;
        box-sizing: border-box;
    }
 }


</style>